<template>
  <div class="app-container">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item class="active">
        <span
          class="xiaoshou"
          @click="
            breadArr.length = 0;
            searchMap.data = 0;
            search();
          "
          >查看一级分类</span
        >
      </el-breadcrumb-item>
      <el-breadcrumb-item v-for="(item, index) in breadArr" :key="index">
        <span
          class="xiaoshou"
          @click="
            breadArr.length = breadArr.length - 1;
            searchMap.data = item.id;
            search();
          "
          >{{ item.name }}</span
        >
      </el-breadcrumb-item>
    </el-breadcrumb>

    <br />
    <el-button
      type="success"
      icon="el-icon-plus"
      @click="dialogFormVisible = true"
      >添加类目</el-button
    >

    <el-table :data="catList" style="width: 100%" ref="brandTable">
      <el-table-column type="selection"> </el-table-column>

      <el-table-column prop="id" label="分类ID" />
      <el-table-column prop="name" label="类目名称" width="200" />
      <el-table-column prop="parentId" label="模板ID" />
      <el-table-column prop="tname" label="模板名称">
        <template slot-scope="scp">
          <div>{{ scp.row.tname | testnull }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="brands" label="关联品牌">
        <template slot-scope="scope">
          <div>{{ scope.row.brands | jsonformart }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="spec" label="关联规格">
        <template slot-scope="scope">
          <div>{{ scope.row.spec | jsonformart }}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <!-- 自定义展示 -->
          <div>
            <el-button
              size="mini"
              type="primary"
              @click="
                breadArr.push(scope.row);
                findChild(scope.row.id);
              "
              >查看下级分类</el-button
            >
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="
                entity = JSON.parse(JSON.stringify(scope.row));
                update();
              "
              >修改</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>

    <br />

    <!-- 添加修改类目dialog -->
    <el-dialog
      title="类目编辑"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="entity" ref="brandForm">
        <el-form-item label="父类目">
          <el-select v-model="entity.parentId" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目名称" prop="name" label-width="100px">
          <el-input v-model="entity.name"></el-input>
        </el-form-item>
        <el-form-item label="选择模板" label-width="100px">
          <el-select v-model="entity.templateId" placeholder="请选择">
            <el-option
              v-for="item in tmpls"
              :key="item.value"
              :label="item.lable"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findbyid, findAll, addcat, updatecat } from "@/api/cat";
import Template from "./Template.vue";
import { findbypageT } from "@/api/Template";
export default {
  components: { Template },

  data() {
    return {
      options: [
        {
          value: 0,
          lable: "自定义的第一级目录",
        },
      ],
      catList: [],
      searchMap: {
        page: 1,
        limit: 100,
        size: 100,
        data: 0, //data就是parent_id  ,默认查一级商品分类
      },
      total: 0, //总记录数
      breadArr: [], //面包屑数组
      dialogFormVisible: false,
      entity: { parentId: 0 }, //要保存的商品分类
      tmpls: [], // 模板列表
    };
  },
  methods: {
    update() {
      this.dialogFormVisible = true;
      console.log(this.entity);
      this.tmpls.forEach((e) => {
        if (e.lable == this.entity.tname) {
          this.entity.templateId = e.value;
        }
      });
    },
    open1() {
      this.$notify({
        title: "成功",
        message: "修改(/添加)成功",
        type: "success",
      });
    },

    open2() {
      this.$notify({
        title: "失败",
        message: "修改（/添加）失败",
        type: "warning",
      });
    },
    save() {
      console.log(this.entity);
      if (this.entity.id != null) {
        updatecat(this.entity)
          .then((e) => {
            this.open1();
            this.search();
          })
          .catch((e) => {
            this.open2();
            this.search();
          });
        this.entity = { parentId: 0 };
      } else {
        addcat(this.entity)
          .then((e) => {
            this.open1();
            this.search();
          })
          .catch((e) => {
            this.open2();
            this.search();
          });
        this.entity = { parentId: 0 };
      }
      this.dialogFormVisible = false;
    },
    search() {
      findbyid(this.searchMap.data).then((res) => {
        this.catList = res;
      });
    },
    findChild(pid) {
      this.searchMap.data = pid;
      this.search();
    },
  },
  created() {
    findbypageT(this.searchMap).then((e) => {
      e.list.forEach((e) => {
        this.tmpls.push({
          value: e.id,
          lable: e.name,
        });
      });
    });
    findAll().then((res) => {
      res.forEach((element) => {
        this.options.push({
          value: element.id,
          lable: element.name,
        });
      });
    });
    this.search();
  },
};
</script>

<style lang="scss">
.xiaoshou {
  cursor: pointer;
}
</style>